import Head from 'next/head'
import Layout from '../components/layouts/default'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/paginationPosts'
import PaginationLink from '../components/pagination'
import PostItem from '../components/PostItem'
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(({ breakpoints, spacing, palette }) => ({
  list: {
    [breakpoints.down('md')]: {
      paddingTop: spacing(5)
    }
  },
  pagination: {
    '& .MuiPagination-ul': {
      justifyContent: 'center'
    }
  }
}))

export default function Home({ allPostsData, total }) {
  const classes = useStyles()
  return (
    <Layout>
      <Head>
        <title>boboan</title>
      </Head>
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <ul className={utilStyles.list + ' ' + classes.list}>
          {allPostsData.map((post) => <PostItem {...post} />)}
        </ul>
      </section>
      <div className={classes.pagination}>
        <PaginationLink total={total} />
      </div>
    </Layout>
  )
}

export async function getStaticProps() {
  const { allPostsData, total } = getSortedPostsData()
  return {
    props: {
      allPostsData,
      total
    }
  }
}
